// import React, {useState} from 'react'
// import {Button, Divider, Upload} from 'antd'
// import {EyeOutlined, FileImageOutlined} from '@ant-design/icons'
// import BraftEditor from 'braft-editor'
// import {ContentUtils} from 'braft-utils'
// import Table from 'braft-extensions/dist/table'
//
// import 'braft-editor/dist/index.css'
// import 'braft-extensions/dist/table.css'
//
// // 输出表格默认不带边框，如果需要边框，设置参数exportAttrString为'border="1" style="border-collapse: collapse"'
// const options = {
//     defaultColumns: 5, // 默认列数
//     defaultRows: 5, // 默认行数
//     withDropdown: true, // 插入表格前是否弹出下拉菜单
//     columnResizable: true, // 是否允许拖动调整列宽，默认false
//     exportAttrString: '', // 指定输出HTML时附加到table标签上的属性字符串
//     // includeEditors: ['id-1'], // 指定该模块对哪些BraftEditor生效，不传此属性则对所有BraftEditor有效
//     // excludeEditors: ['id-2']  // 指定该模块对哪些BraftEditor无效
// };
//
// const TestEditor = () => {
//     const [content, setContent] = useState(BraftEditor.createEditorState(null));
//     const [outputHTML, setOutputHTML] = useState(null);
//     BraftEditor.use(Table(options));
//
//     const handleChange = (v) => {
//         setContent(v);
//         setOutputHTML(v.toHTML())
//     };
//
//     const uploadHandler = (param) => {
//         if (!param.file) {
//             return false
//         }
//
//         setContent(ContentUtils.insertMedias(content, [{
//             type: 'IMAGE',
//             // url: URL.createObjectURL
//             url: 'http://wx2.sinaimg.cn/large/705793b8gy1g503pv9yazj20jy0imgmf.jpg'
//         }]));
//     };
//
//     const preview = () => {
//         if (window.previewWindow) {
//             window.previewWindow.close()
//         }
//
//         window.previewWindow = window.open();
//         window.previewWindow.document.write(buildPreviewHtml());
//         window.previewWindow.document.close()
//     };
//
//     const buildPreviewHtml = () => {
//         return `
//               <!Doctype html>
//               <html lang="">
//                 <head>
//                   <title>Preview Content</title>
//                   <style>
//                     html,body{
//                       height: 100%;
//                       margin: 0;
//                       padding: 0;
//                       overflow: auto;
//                       background-color: #f1f2f3;
//                     }
//                     .container{
//                       box-sizing: border-box;
//                       width: 1000px;
//                       max-width: 100%;
//                       min-height: 100%;
//                       margin: 0 auto;
//                       padding: 30px 20px;
//                       overflow: hidden;
//                       background-color: #fff;
//                       border-right: solid 1px #eee;
//                       border-left: solid 1px #eee;
//                     }
//                     .container img,
//                     .container audio,
//                     .container video{
//                       max-width: 100%;
//                       height: auto;
//                     }
//                     .container p{
//                       white-space: pre-wrap;
//                       min-height: 1em;
//                     }
//                     .container pre{
//                       padding: 15px;
//                       background-color: #f1f1f1;
//                       border-radius: 5px;
//                     }
//                     .container blockquote{
//                       margin: 0;
//                       padding: 15px;
//                       background-color: #f1f1f1;
//                       border-left: 3px solid #d1d1d1;
//                     }
//                   </style>
//                 </head>
//                 <body>
//                   <div class="container">${content.toHTML()}</div>
//                 </body>
//               </html>
//         `;
//     };
//
//     const extendControls = [
//         {
//             key: 'custom-button',
//             type: 'component',
//             component: (
//                 <Button
//                     className="control-item button upload-button"
//                     data-title="内容预览"
//                     onClick={preview}
//                 >
//                     <EyeOutlined/>
//                 </Button>
//             ),
//         },
//         {
//             key: 'antd-uploader',
//             type: 'component',
//             component: (
//                 <Upload
//                     accept="image/*"
//                     showUploadList={false}
//                     customRequest={uploadHandler}
//                 >
//                     <Button
//                         className="control-item button upload-button"
//                         data-title="插入图片"
//                     >
//                         <FileImageOutlined/>
//                     </Button>
//                 </Upload>
//             )
//         }
//     ];
//
//     return (
//         <>
//             <div>
//                 <div className="editor-wrapper">
//                     <BraftEditor
//                         value={content}
//                         onChange={handleChange}
//                         extendControls={extendControls}
//                     />
//                 </div>
//                 <Divider/>
//                 <div>
//                     <h4>源码：</h4>
//                     <div
//                         className="output-content"
//                     >
//                         {outputHTML}
//                     </div>
//                 </div>
//             </div>
//         </>
//     );
// };
//
// export default TestEditor;



import React from 'react';
import { Editor } from '@tinymce/tinymce-react';

class TestEditor extends React.Component {
    handleEditorChange = (content, editor) => {
        console.log('Content was updated:', content);
    }

    render() {
        return (
            <Editor
                initialValue="<p>This is the initial content of the editor</p>"
                init={{
                    language:'zh_CN',
                    plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave bdmap indent2em autoresize formatpainter axupimgs',
                    toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
    styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
    table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs',
                    height: 650, //编辑器高度
                    min_height: 400,
                }}
                onEditorChange={this.handleEditorChange}
            />
        );
    }
}

export default TestEditor;



//
// import React from "react";
// import E from 'wangeditor'
//
// class TestEditor extends React.Component {
//
//     constructor(props) {
//         super(props);
//         this.state = {
//             editorContent:''
//         };
//     }
//
//     componentDidMount() {
//         const editor = new E("#div1")
//         // 使用 onchange 函数监听内容的变化，并实时更新到 state 中
//         // editor.config.onchange = html => {
//         //     console.log(editor.txt.html())
//         //     this.setState({
//         //         // editorContent: editor.txt.text()
//         //         editorContent: editor.txt.html()
//         //     })
//         // }
//         // editor.config.menus = [
//         //     'head',  // 标题
//         //     'bold',  // 粗体
//         //     'fontSize',  // 字号
//         //     'fontName',  // 字体
//         //     'italic',  // 斜体
//         //     'underline',  // 下划线
//         //     'strikeThrough',  // 删除线
//         //     'foreColor',  // 文字颜色
//         //     'backColor',  // 背景颜色
//         //     'link',  // 插入链接
//         //     'list',  // 列表
//         //     'justify',  // 对齐方式
//         //     'quote',  // 引用
//         //     'emoticon',  // 表情
//         //     'image',  // 插入图片
//         //     'table',  // 表格
//         //     'video',  // 插入视频
//         //     'code',  // 插入代码
//         //     'undo',  // 撤销
//         //     'redo'  // 重复
//         // ]
//         editor.config.uploadImgShowBase64 = true
//         editor.create()
//
//     };
//
//     render() {
//         return (
//             <div id="div1"></div>
//             // <div className="shop">
//             //     <div className="text-area" >
//             //         <div ref="editorElemMenu"
//             //              style={{backgroundColor:'#f1f1f1',border:"1px solid #ccc"}}
//             //              className="editorElem-menu">
//             //
//             //         </div>
//             //         <div
//             //             style={{
//             //                 padding:"0 10px",
//             //                 overflowY:"scroll",
//             //                 height:300,
//             //                 border:"1px solid #ccc",
//             //                 borderTop:"none"
//             //             }}
//             //             ref="editorElemBody" className="editorElem-body">
//             //
//             //         </div>
//             //     </div>
//             // </div>
//         );
//     }
//
// }
//
// export default TestEditor;



// import React, { useState, useEffect } from 'react';
//
// import E from 'wangeditor'
//
// let editor = null
// function TestEditor() {
//
//     const [content, setContent] = useState('')
//
//     useEffect(() => {
//         // 注：class写法需要在componentDidMount 创建编辑器
//         editor = new E("#div1")
//
//         editor.config.onchange = (newHtml) => {
//             setContent(newHtml)
//         }
//         /**一定要创建 */
//         editor.create()
//
//         return () => {
//             // 组件销毁时销毁编辑器  注：class写法需要在componentWillUnmount中调用
//             editor.destroy()
//         }
//     }, [])
//
//     // 获取html方法1
//     function getHtml() {
//         alert(content)
//     }
//
//     // 获取html方法2
//     function getHtml1() {
//         alert(editor.txt.html())
//     }
//
//     // 获取text
//     function getText() {
//         alert(editor.txt.text())
//     }
//
//     return (
//         <div>
//             <div id="div1"></div>
//
//             <button onClick={getHtml}>获取html</button>
//             <button onClick={getHtml1}>获取html1</button>
//             <button onClick={getText}>获取text</button>
//         </div>
//     );
// }
//
//
// export default TestEditor;
